<template>
    <div class="flex justify-center items-center min-h-screen">
        <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md space-y-6">
            <h2 class="text-2xl font-bold text-center text-gray-800">用户注册</h2>
            <form @submit.prevent="handleRegistration" class="space-y-4">
                <div>
                    <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                    <input v-model="username" type="text" id="username" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <span v-if="usernameError" class="text-red-500 text-sm">用户名不能为空</span>
                </div>
                <div>
                    <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                    <input v-model="password" type="password" id="password" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <span v-if="passwordError" class="text-red-500 text-sm">密码不能为空</span>
                </div>
                <div>
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700">确认密码</label>
                    <input v-model="confirmPassword" type="password" id="confirmPassword" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <span v-if="confirmPasswordError" class="text-red-500 text-sm">两次输入的密码不一致</span>
                </div>
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                    <input v-model="email" type="email" id="email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    <span v-if="emailError" class="text-red-500 text-sm">请输入有效的邮箱地址</span>
                </div>
                <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">注册</button>
            </form>
            <div class="text-center text-sm text-gray-600">
                已有账号?
                <router-link to="/" class="text-indigo-600 hover:text-indigo-900">立即登录</router-link>
<!--                <a href="#" class="text-indigo-600 hover:text-indigo-900">立即登录</a>-->
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

const username = ref('');
const password = ref('');
const confirmPassword = ref('');
const email = ref('');
const usernameError = ref(false);
const passwordError = ref(false);
const confirmPasswordError = ref(false);
const emailError = ref(false);

const handleRegistration = () => {
    usernameError.value =!username.value;
    passwordError.value =!password.value;
    confirmPasswordError.value = password.value!== confirmPassword.value;
    emailError.value =!email.value ||!/.+@.+\..+/.test(email.value);

    if (!usernameError.value &&!passwordError.value &&!confirmPasswordError.value &&!emailError.value) {
        try {
            axios.post('/api/basic/registration', {
                username: username.value,
                password: password.value,
                email: email.value
            });
        }catch (error){
            console.error(error);
        }
    }
};
</script>

<style scoped>
body {
    background: linear-gradient(to bottom right, #f0f4f8, #d9e2ec);
}
</style>
